<template>
  <div id="app" class="cyber-app">
    <router-view />
    
    <!-- 数据迁移对话框 -->
    <DataMigrationDialog
      v-model="showMigrationDialog"
      :data-count="migrationDataCount"
      @migration-completed="onMigrationCompleted"
      @migration-skipped="onMigrationSkipped"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, getCurrentInstance } from 'vue'
import { animationService } from './services/animationService'
import DataMigrationDialog from './components/DataMigrationDialog.vue'
import type { MigrationResult } from './services/migrationService'

/** 数据迁移对话框显示状态 */
const showMigrationDialog = ref(false)
/** 需要迁移的数据数量 */
const migrationDataCount = ref(0)

/**
 * 应用初始化
 * 设置全局动画和主题配置
 */
onMounted(() => {
  // 初始化GSAP动画服务
  animationService.initializeGSAP()
  
  // 添加全局键盘事件监听
  document.addEventListener('keydown', handleGlobalKeydown)
  
  // 检查是否需要显示数据迁移对话框
  checkMigrationDialog()
})

/**
 * 检查是否需要显示数据迁移对话框
 */
function checkMigrationDialog() {
  const app = getCurrentInstance()?.appContext.app
  if (app?.config.globalProperties.$needsMigration) {
    showMigrationDialog.value = true
    migrationDataCount.value = app.config.globalProperties.$migrationDataCount || 0
  }
}

/**
 * 数据迁移完成处理
 * @param result - 迁移结果
 */
function onMigrationCompleted(result: MigrationResult) {
  console.log('数据迁移完成:', result)
  // 可以在这里添加迁移完成后的处理逻辑
  // 比如刷新页面数据、显示成功提示等
}

/**
 * 数据迁移跳过处理
 */
function onMigrationSkipped() {
  console.log('用户跳过了数据迁移')
  // 可以在这里添加跳过迁移后的处理逻辑
}

/**
 * 全局键盘事件处理
 * @param event - 键盘事件
 */
const handleGlobalKeydown = (event: KeyboardEvent) => {
  // ESC键关闭所有弹窗
  if (event.key === 'Escape') {
    // 这里可以添加全局ESC处理逻辑
    console.debug('Global ESC key pressed')
  }
}
</script>

<style lang="scss">
/* 导入赛博朋克主题样式 */
@import './styles/cyberpunk.scss';

/* 应用根容器样式 */
.cyber-app {
  height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* 确保路由视图占满容器 */
.cyber-app > * {
  width: 100%;
}

/* 全局字体优化 */
body {
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  text-rendering: optimizeLegibility;
}

/* 全局焦点样式 */
*:focus {
  outline: 2px solid var(--cyber-primary);
  outline-offset: 2px;
}

*:focus:not(:focus-visible) {
  outline: none;
}

/* 全局链接样式 */
a {
  color: var(--cyber-primary);
  text-decoration: none;
  transition: color var(--cyber-transition-normal) ease;
}

a:hover {
  color: var(--cyber-primary-light);
  text-decoration: underline;
}

/* 全局表单元素样式 */
input, textarea, select {
  font-family: inherit;
}

/* 全局按钮重置 */
button {
  font-family: inherit;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* 全局图片优化 */
img {
  max-width: 100%;
  height: auto;
}

/* 全局代码样式 */
code, pre {
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  background: var(--cyber-bg-secondary);
  border: 1px solid var(--cyber-border-secondary);
  border-radius: var(--cyber-radius-small);
}

code {
  padding: 2px 4px;
  font-size: 0.9em;
}

pre {
  padding: var(--cyber-spacing-md);
  overflow-x: auto;
}

pre code {
  background: none;
  border: none;
  padding: 0;
}

/* 全局表格样式 */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--cyber-bg-card);
  border: 1px solid var(--cyber-border-primary);
  border-radius: var(--cyber-radius-medium);
  overflow: hidden;
}

th, td {
  padding: var(--cyber-spacing-sm) var(--cyber-spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--cyber-border-secondary);
}

th {
  background: var(--cyber-bg-secondary);
  font-weight: 600;
  color: var(--cyber-primary);
}

tr:hover {
  background: rgba(50, 236, 138, 0.05);
}

/* 全局列表样式 */
ul, ol {
  padding-left: var(--cyber-spacing-lg);
}

li {
  margin-bottom: var(--cyber-spacing-xs);
}

/* 全局引用样式 */
blockquote {
  margin: var(--cyber-spacing-lg) 0;
  padding: var(--cyber-spacing-md) var(--cyber-spacing-lg);
  border-left: 4px solid var(--cyber-primary);
  background: var(--cyber-bg-secondary);
  border-radius: 0 var(--cyber-radius-medium) var(--cyber-radius-medium) 0;
  font-style: italic;
}

/* 全局分隔线样式 */
hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyber-border-primary), transparent);
  margin: var(--cyber-spacing-xl) 0;
}

/* 全局标题样式 */
h1, h2, h3, h4, h5, h6 {
  margin: var(--cyber-spacing-lg) 0 var(--cyber-spacing-md) 0;
  font-weight: 600;
  line-height: 1.3;
  color: var(--cyber-text-primary);
}

h1 {
  font-size: 2.5rem;
  background: var(--cyber-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

h2 {
  font-size: 2rem;
  color: var(--cyber-primary);
}

h3 {
  font-size: 1.5rem;
  color: var(--cyber-primary-light);
}

/* 响应式标题 */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
}
</style>